<template>
    <video-player  class="video-player-box"
        ref="videoPlayer"
        :options="playerOptions"
        :playsinline="true"
        customEventName="customstatechangedeventname"
        @play="onPlayerPlay($event)"
        @pause="onPlayerPause($event)"
        @ended="onPlayerEnded($event)"
        @waiting="onPlayerWaiting($event)"
        @playing="onPlayerPlaying($event)"
        @loadeddata="onPlayerLoadeddata($event)"
        @timeupdate="onPlayerTimeupdate($event)"
        @canplay="onPlayerCanplay($event)"
        @canplaythrough="onPlayerCanplaythrough($event)"
        @statechanged="playerStateChanged($event)"
        @ready="playerReadied"
    >
    </video-player>
</template>

<script>
  // Similarly, you can also introduce the plugin resource pack you want to use within the component
  // import 'some-videojs-plugin'
  let fixedOptions = {
    
  };
  export default {
    data() {
      return {
        playerOptions: {
          // videojs options
          muted: true,
          language: 'en',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [{
            type: "video/mp4",
            src: require("@/assets/test.mp4")
          }],
          poster: require("@/assets/img/home_banner.jpg"),
          controlBar: { 
              'currentTimeDisplay':true,
              'timeDivider':true,
              'durationDisplay':true,
              'remainingTimeDisplay':true,
              'volumePanel': {
                  inline: true,
              },
          }
        }
      }
    },
    mounted() {
      console.log('this is current player instance object', this.player)
    },
    computed: {
      playerOptions(){

      }
    },
    methods: {
      // listen event
      onPlayerPlay(player) {
        // console.log('player play!', player)
      },
      onPlayerPause(player) {
        // console.log('player pause!', player)
      },
      // ...player event

      // or listen state event
      playerStateChanged(playerCurrentState) {
        // console.log('player current update state', playerCurrentState)
      },

      // player is ready
      playerReadied(player) {
        console.log('the player is readied', player)
        // you can use it to do something...
        // player.[methods]
      },

      onPlayerPlaying(){},
      onPlayerTimeupdate(){},
      onPlayerCanplay(){},
      onPlayerCanplaythrough(){},
      onPlayerLoadeddata(){}
    }
  }
</script>

<style lang="scss" scoped>
.video-player {
    width: 100%;
    height: 350px;

    .video-js, .vjs_video_3-dimensions {
        width: 100% !important;
        height: 100% !important;
    }
}
</style>